<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="jquery.min.js"></script> -->
    <style>
        div {
            position: absolute;
            width: 100px;
            left: 0px;
            height: 100px;
            background-color: pink;
        }
        
        span {
            position: absolute;
            top: 200px;
            left: 0px;
            width: 50px;
            height: 50px;
            background: aqua;
        }
    </style>
</head>
<!-- //动画 js vs jq -->

<body>
    <div></div>
    <span></span>
    <script>
        //js
        //必须给div 加定位
        var div = document.querySelector("div");
        // var timer = setInterval(function() {
        //     if (div.offsetLeft >= 400) {
        //         clearInterval(timer);
        //     }
        //     div.style.left = div.offsetLeft + 1 + 'px';

        // }, 300);

        // function animate_1(obj, target) {
        //     clearInterval(obj.timer); //pi'mia避免一个obj绑定多个定时器

        //     obj.timer = setInterval(function() { //给具体obj绑定定时器 节省空间
        //         if (obj.offsetLeft == target) {
        //             clearInterval(obj.timer);
        //         }
        //         obj.style.left = obj.offsetLeft + 1 + 'px';

        //     }, 30);
        // }
        // animate_1(div, 700);
        // animate_1(document.querySelector("span"), 500)



        //缓动效果 通过设置步长实现  step = (target - obj.offsetLeft) / 10

        function animate_2(obj, target) {
            clearInterval(obj.timer); //pi'mia避免一个obj绑定多个定时器

            obj.timer = setInterval(function() { //给具体obj绑定定时器 节省空间
                // var step = Math.ceil((target - obj.offsetLeft) / 10);
                var step = (target - obj.offsetLeft) / 10;
                step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + step + 'px';

            }, 30);
        }

        animate_2(div, 700);
        // animate_2(div, 500);

        animate_2(document.querySelector("span"), 500);

        //jq
        // $("div").animate({
        //     left: '400px'
        // }, 'slow');
    </script>
</body>

</html>